import React from 'react'
/* --------------------------- Component --------------------------- */
const Index = ({ data }, ref) => {
	const [ result, setResult ] = React.useState([])
	
	const getData = React.useCallback( data =>{
		if(typeof data === 'string'){
			data = data.split('\n')
		}
		
		if(Array.isArray(data)){
			setResult( data )
		}
	},[ ])
	
	React.useEffect(()=>{
		getData( data )
	},[data, getData])
	
	React.useImperativeHandle( ref, () => ({
		setData: data => getData( data )
	}))
	
	return Array.isArray(result) && (
		<div className={`code-list`}>
			<dl className='code-number'>
				{
					result.map((v,i)=> <dt key={i}>{i+1}</dt> )
				}
			</dl>
			<dl className='code-content'>
				{
					result.map((v,i)=> <dd key={i} dangerouslySetInnerHTML={{__html:v}}></dd> )
				}
			</dl>
		</div>
	)
}

export default Index